---
title: BottomSheet.Modal
path: /native/utilities/bottom-sheet
---

# BottomSheet.Modal

The `BottomSheet.Modal` and it's respective components are exports of [`@gorhom/react-native-bottom-sheet`](https://gorhom.github.io/react-native-bottom-sheet/).

You can read more on the [internal `BottomSheet.Modal` functionalities here](https://gorhom.github.io/react-native-bottom-sheet). As Bumbag inherits `@gorhom/react-native-bottom-sheet`, it shares the same props, methods and API.

<center><img src="/bottom-sheet-modal.gif" width="600px" /></center>

## Compatibility

| iOS | Android | Web |
| --- | ------- | --- |
| ✅  | ✅      | ❌  |

## Install

> This component requires you to install `@bumbag-native/bottom-sheet`, `react-native-gesture-handler` & `react-native-reanimated` as a separate dependency.

```
npm install @bumbag-native/bottom-sheet react-native-reanimated react-native-gesture-handler
```

Ensure you have set up [react-native-reanimated](https://docs.swmansion.com/react-native-reanimated/docs/2.2.0/installation) and [react-native-gesture-handler](https://docs.swmansion.com/react-native-gesture-handler/docs/) in your project.

## Import

```jsx
import { BottomSheet } from '@bumbag-native/bottom-sheet';
```

## Usage

You can render a [bottom sheet as a modal](https://gorhom.github.io/react-native-bottom-sheet/modal). It provides all of the `BottomSheet` functionalities, with extra modal presentation functionalities.

To get started using bottom sheet modal's in your app, you will need to wrap your app in a `BottomSheetModalProvider`:

```jsx
import { BottomSheetModalProvider } from '@bumbag-native/bottom-sheet';

function App() {
  return (
    <BottomSheetModalProvider>
      // ... your app
    </BottomSheetModalProvider>
  );
}
```

Then you can start using `BottomSheet.Modal` in your app:

```jsx
import React from 'react';
import { Button } from 'bumbag-native';
import { BottomSheet } from '@bumbag-native/bottom-sheet';

function Example() {
  const modalRef = React.useRef();

  return (
    <>
      <Button onPress={() => modalRef.current.present()}>Show modal</Button>
      <BottomSheet.Modal ref={modalRef}>
        Hello world!
      </BottomSheet.Modal>
    </>
  )
}
```

## Methods

### present

Mount and present the modal.

```jsx
function Example() {
  const bottomSheetRef = React.useRef();

  return (
    <>
      <Button onPress={() => bottomSheetRef.current.present()}>Present</Button>
      <BottomSheet.Modal ref={bottomSheetRef}>
        Hello world
      </BottomSheet.Modal>
    </>
  )
}
```

### dismiss

Close and unmount the modal.

```jsx
function Example() {
  const bottomSheetRef = React.useRef();

  return (
    <>
      <Button onPress={() => bottomSheetRef.current.dismiss()}>Dismiss</Button>
      <BottomSheet.Modal ref={bottomSheetRef}>
        Hello world
      </BottomSheet.Modal>
    </>
  )
}
```

## Custom handles

```jsx
<BottomSheet.Modal
  renderHandle={() => 
    <Box backgroundColor="gray" borderRadius="2px" height="major-1" width="major-5" />
  }
>
  Hello world
</BottomSheet.Modal>
```